<template>
  <view class="container">
    <my-navbar-top></my-navbar-top>

    <view class="login">
      <view class="login-title">欢迎加入ESSENCE</view>
      <view class="register-title">
        <view>登录</view>

        <navigator url="/pages/user/register/index">
          <text>没有账号？</text>
          <text class="auth-phone">立即注册</text>
        </navigator>
      </view>
      <!-- 表单 -->
      <view class="ef-form">
        <view class="ef-form__item">
          <view class="ef-form__item-header">
            <view class="title">手机号</view>
          </view>
          <view class="ef-form__item-body">
            <uni-easyinput
              type="number"
              maxlength="11"
              v-model="phoneNumber"
              :inputBorder="false"
              primaryColor="#c9a063"
              placeholder="请输入您的手机号"
            />
            <button
              class="auth-phone"
              open-type="getPhoneNumber"
              @getphonenumber="decryptPhoneNumber"
            >
              授权手机号
            </button>
          </view>
        </view>
      </view>

      <view class="address-add">
        <button class="primary-button" @click="save">立即登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      // 校验表单数据
      phoneNumber: '',
    }
  },
  mounted() {
    wx.login({
      success: (res) => {
        console.log(res, 'res')
        this.$api
          .wxAuth({
            code: res.code,
          })
          .then((res) => {
            let { user } = res.data
            uni.setStorageSync('userInfo', user)
            uni.setStorageSync('unionid', user.unionid)
            console.log(res, 'res-登录')
          })
      },
    })
  },
  methods: {
    /**
     * 获取手机号
     */
    decryptPhoneNumber(e) {
      console.log(e)
      let { errMsg, code = null } = e.detail
      if (errMsg == 'getPhoneNumber:ok') {
        this.$api
          .decodePhone({
            code,
          })
          .then((res) => {
            console.log(res, '---')
            this.phoneNumber = res.data.phoneNumber || ''
          })
      }
    },
    save() {
      if (!this.phoneNumber) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
        })
        return
      }
      // 校验手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/
      if (!phoneRegex.test(this.phoneNumber)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none',
        })
        return
      }
      this.$api.userLogin({ telephone: this.phoneNumber }).then((res) => {
        console.log(res, 'res-登录')
        if (res.code == 0) {
          this.$util.showToast('登录成功')
          uni.setStorageSync('userInfo', res.data)
          uni.navigateBack({
            delta: 1, // 返回上一页
          })
        } else {
          uni.showToast({
            title: res.msg || '登录失败',
            icon: 'none',
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  padding: 50rpx 36rpx 154rpx 36rpx;
  overflow-y: auto;
  box-sizing: border-box;
  .login-title {
    font-size: 29rpx;
    color: #545454;
    margin-bottom: 110rpx;
    text-align: center;
  }
  .register-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 29rpx;
    color: #545454;
    margin-bottom: 80rpx;
    text {
      font-size: 24rpx;
      color: #979797;
    }
    .auth-phone {
      font-size: 24rpx;
      color: var(--main-color);
    }
  }

  .address-add {
    width: 100%;
    border-radius: 2rpx;
    margin-top: 90rpx;
  }

  .auth-phone {
    font-size: 24rpx;
    margin-left: 20rpx;
    line-height: 32rpx;
    color: var(--main-color);
    border-bottom: 2rpx solid var(--main-color);
  }
}
</style>
